<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
	
</head>
<body>
	
	<input type="text" name="" id="color" style="background-color: rgb(128, 128, 171); "/>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/colorpicker.js"></script>
	<script type="text/javascript">
		$('#color').ColorPicker({
			
			onShow: function (colpkr) {
				$(colpkr).fadeIn(500);
				return false;
			},
			onHide: function (colpkr) {
				$(colpkr).fadeOut(500);
				return false;
			},
			onChange: function (hsb, hex, rgb) {
				$('#color').css('backgroundColor', '#' + hex);
			}
		});
	</script>
</body>
</html>